import React, { useState, } from 'react';
import { useNavigate,Link } from 'react-router-dom'
import { HomeOutlined, } from '@ant-design/icons';
import { Breadcrumb, Divider, Button, Checkbox, Input, message } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import axios from 'axios'
import { useDispatch } from 'react-redux';
import { login } from '../../component/actions';
import "./index.less"

export default function Login() {
  const dispatch = useDispatch();
  const [accountValue, setAccountValue] = useState('');
  const [codeValue, setCodeValue] = useState('');
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate()

  const onChange = (e: CheckboxChangeEvent) => {
    console.log(`checked = ${e.target.checked}`);
  };
  const submit = () => {
    if (accountValue && codeValue) {
      let params: any = {
        account: accountValue,
        code: codeValue
      }
      axios.post("http://localhost:8080/api/login", params).then((response: any) => {
        if (response.data.code == 200) {
          if (response.data.result) {
            dispatch(login(accountValue, codeValue));
            messageApi.open({
              type: 'success',
              content: '登录成功！',
            });
            navigate('/home', {
              replace: false,
              state: { a: 1, b: 2 }
            })
          } else {
            messageApi.open({
              type: 'error',
              content: '密码错误！',
            });
          }
        } else {
          messageApi.open({
            type: 'error',
            content: "账号不存在",
          });
        }
      }).catch((err) => {
        messageApi.open({
          type: 'error',
          content: err.message,
        });
      });
    } else {
      messageApi.open({
        type: 'error',
        content: '账号和密码均不能为空',
      });
    }
  };

  const goRegister = () => {
    navigate('/register', {
      replace: false,
      state: { a: 1, b: 2 }
    })
  }

  return (
    <div className='common'>
      {contextHolder}
      <div className="bread">
        <Breadcrumb separator="" style={{ background: 'none' }}>
          <Breadcrumb.Item><span><HomeOutlined style={{ marginRight: '5px' }} />您现在的位置</span></Breadcrumb.Item>
          <Breadcrumb.Separator>：</Breadcrumb.Separator>
          <Breadcrumb.Item><Link to="/home">首页</Link></Breadcrumb.Item>
          <Breadcrumb.Separator>{`>`}</Breadcrumb.Separator>
          <Breadcrumb.Item>品酒会</Breadcrumb.Item>
          <Breadcrumb.Separator>{`>`}</Breadcrumb.Separator>
          <Breadcrumb.Item>会员登录</Breadcrumb.Item>
        </Breadcrumb>
        <Divider className='divider' />
      </div>
      <div className="login">
        <div className="login_title"><b>会员登录</b></div>
        <div className="login_content">
          <div className="login_content_info">
            <div className="account">
              <span className='login_content_title'>登录账号：</span>
              <Input className='login_content_input' value={accountValue}
                onChange={(e) => setAccountValue(e.target.value)} placeholder="请输入账号" />
              <span className='login_content_tip'>请输入您的手机或email地址</span>
            </div>
            <div className="account">
              <span className='login_content_title'>密码：</span>
              <Input className='login_content_input' value={codeValue}
                onChange={(e) => setCodeValue(e.target.value)} placeholder="请输入密码" />
              <span className='login_content_tip'>忘记密码？</span>
            </div>
            <div className="account">
              <span className='login_content_title'></span>
              <Checkbox onChange={onChange}>记住账号</Checkbox>
            </div>
            <div className="bnts">
              <Button className='bnt' onClick={submit} style={{ marginRight: "20px" }} type="primary">登录</Button>
              <Button className='bnt' onClick={goRegister} type="primary">注册</Button>
            </div>
          </div>
        </div>
      </div>      
    </div>
  )
}
